<template>
  <div class="tree-selection-container">
    <el-popover
      class="select-tree__popover"
      placement="bottom-start"
      :width="width"
      trigger="click"
      v-model="popoverVisible"
    >
      <el-input
        class="select-tree__input"
        size="small"
        placeholder="输入关键字进行过滤"
        v-model="filterText"
      ></el-input>
      <el-tree
        class="filter-tree"
        :data="treeData"
        node-key="id"
        :default-expanded-keys="treeExpandedKeys"
        :props="defaultProps"
        :filter-node-method="filterNode"
        :style="{'min-width':treeWidth}"
        :expand-on-click-node="false"
        ref="tree"
        @node-click="currentNode"
      ></el-tree>
      <el-select
        v-model="labelValue"
        ref="select"
        slot="reference"
        clearable
        placeholder="请选择所属地区"
        popper-class="select-tree__option"
        size="small"
        :style="{'width':width}"
        @clear="onClear"
      ></el-select>
    </el-popover>
  </div>
</template>
<script>
export default {
    data(){
        return{
            filterText: '',
            labelValue:'',
            labelId:'', // 标签对应的id值
            treeWidth:'',
            popoverVisible: false,
            defaultProps: {
                children: 'childList',
                label: 'name'
            },
            treeExpandedKeys:['97b5f2428e45429c875782715e06888b'] // 默认展开浙江省下面的市列表
        }
    },
    props: {
        treeData: {
            type: Array
        },
        width: {
            type: String
        },
        // 编辑的时候回传的value
        setLabelValue: {
            type: String
        }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
      setLabelValue(val){
        this.labelValue = val
      }
    },

    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      currentNode(data){
          this.labelValue = data.name;
          this.labelId = data.id;
           /* popover菜单关闭 */
          this.popoverVisible = false;
        const params = {
              id: data.id,
              value: data.name,
              code:data.code
          }
          this.$emit('appEvent',params);
      },
        // 清除选择框数据  
        onClear(){
            this.$emit('clearEvent');
        },
        //  重置
        childReset(){
            this.labelValue = '';
        }
    },
    created(){
        // 获取输入框宽度同步至树状菜单宽度
        this.$nextTick(() => {
            this.treeWidth = this.width || document.getElementById("select-div").offsetWidth+'px';
            this.labelValue = this.setLabelValue;
        });
        if(this.setLabelValue){
            this.labelValue = this.setLabelValue;
        }
          
    }
}
</script>
<style>
.select-tree__option {
  display: none;
  padding: 0;
}
.select-tree__input {
  padding: 0 4px 4px;
}

.select-tree__popover {
  margin-top: 0;
  padding: 5px 0;
}
.filter-tree {
  max-height: 400px;
  overflow-y: auto;
}
</style>